<template>
	<div class="login-container">
		<!-- 顶部工具栏 -->
		<div class="top-bar">
			<el-switch
				v-model="isDark"
				active-icon="Moon"
				inactive-icon="Sunny"
				inline-prompt
				@change="toggleTheme"
			/>
			<lang-select class="ml-2 cursor-pointer"/>
		</div>
		<!-- 登录表单 -->
		<el-card class="login-card">
			<div class="text-center relative">
				<h2>{{ defaultSettings.title }}</h2>
				<el-tag class="ml-2 absolute-rt">{{ defaultSettings.version }}</el-tag>
			</div>

			<el-form
				ref="loginFormRef"
				:model="loginData"
				:rules="loginRules"
				class="login-form"
			>
				<!-- 用户名 -->
				<el-form-item prop="username">
					<div class="input-wrapper">
						<svg-icon class="mx-2" icon-class="user"/>
						<el-input
							ref="username"
							v-model="loginData.username"
							:placeholder="$t('login.username')"
							class="h-[48px]"
							name="username"
							size="large"
						/>
					</div>
				</el-form-item>

				<!-- 密码 -->
				<el-tooltip
					:content="$t('login.capsLock')"
					:visible="isCapslock"
					placement="right"
				>
					<el-form-item prop="password">
						<div class="input-wrapper">
							<svg-icon class="mx-2" icon-class="lock"/>
							<el-input
								v-model="loginData.password"
								:placeholder="$t('login.password')"
								class="h-[48px] pr-2"
								name="password"
								show-password
								size="large"
								type="password"
								@keyup="checkCapslock"
								@keyup.enter="handleLoginSubmit"
							/>
						</div>
					</el-form-item>
				</el-tooltip>

				<!-- 验证码 -->
				<el-form-item prop="captchaCode">
					<div class="input-wrapper">
						<svg-icon class="mx-2" icon-class="captcha"/>
						<el-input
							v-model="loginData.captchaCode"
							:placeholder="$t('login.captchaCode')"
							auto-complete="off"
							class="flex-1"
							size="large"
							@keyup.enter="handleLoginSubmit"
						/>

						<el-image
							:src="captchaBase64"
							class="captcha-image"
							@click="getCaptcha"
						/>
					</div>
				</el-form-item>

				<!-- 登录按钮 -->
				<el-button
					:loading="loading"
					class="w-full"
					size="large"
					type="primary"
					@click.prevent="handleLoginSubmit"
				>{{ $t("login.login") }}
				</el-button>

				<!-- 账号密码提示 -->
				<div class="mt-10 text-sm">
					<span>{{ $t("login.username") }}: admin</span>
					<span class="ml-4"> {{ $t("login.password") }}: 123456</span>
				</div>
			</el-form>
		</el-card>

		<!-- ICP备案 -->
		<div v-show="icpVisible" class="icp-info">
			<p>
				Copyright © 2021 - 2024 youlai.tech All Rights Reserved. 有来技术
				版权所有
			</p>
			<p>皖ICP备20006496号-3</p>
		</div>
	</div>
</template>

<script lang="ts" setup>
// 外部库和依赖
import {LocationQuery, useRoute} from "vue-router";

// 内部依赖
import {useSettingsStore, useUserStore} from "@themeDefault/store";
import AuthAPI, {LoginData} from "@api/auth";
import router from "@themeDefault/router";
import defaultSettings from "@themeDefault/settings";
import {ThemeEnum} from "@themeDefault/enums/ThemeEnum";

// 类型定义
import type {FormInstance} from "element-plus";

import "element-plus/theme-chalk/dark/css-vars.css";
import "@themeDefault/styles/index.scss";
import "uno.css";
import "animate.css";
// 导入 login.scss 文件
import "@themeDefault/styles/login.scss";

//
// import { IpcChannel } from "@src/ipc";
// import { invoke, vueListen } from "@/utils/ipcRenderer";
// function StartServer() {
//   invoke(IpcChannel.StartServer).then((res) => {
//     if (res) {
//       console.log(res);
//     }
//   });
// }
// StartServer();

// 使用导入的依赖和库
const userStore = useUserStore();
const settingsStore = useSettingsStore();
const route = useRoute();
// 窗口高度
const {height} = useWindowSize();
// 国际化 Internationalization
const {t} = useI18n();

// 是否暗黑模式
const isDark = ref(settingsStore.theme === ThemeEnum.DARK);
// 是否显示 ICP 备案信息
const icpVisible = ref(true);
// 按钮 loading 状态
const loading = ref(false);
// 是否大写锁定
const isCapslock = ref(false);
// 验证码图片Base64字符串
const captchaBase64 = ref();
// 登录表单ref
const loginFormRef = ref<FormInstance>();

const loginData = ref<LoginData>({
	username: "admin",
	password: "123456",
} as LoginData);

const loginRules = computed(() => {
	return {
		username: [
			{
				required: true,
				trigger: "blur",
				message: t("login.message.username.required"),
			},
		],
		password: [
			{
				required: true,
				trigger: "blur",
				message: t("login.message.password.required"),
			},
			{
				min: 6,
				message: t("login.message.password.min"),
				trigger: "blur",
			},
		],
		captchaCode: [
			{
				required: true,
				trigger: "blur",
				message: t("login.message.captchaCode.required"),
			},
		],
	};
});

/** 获取验证码 */
function getCaptcha() {
	AuthAPI.getCaptcha().then((res) => {
		let data = res
		loginData.value.captchaKey = data.captchaKey;
		captchaBase64.value = data.captchaBase64;
	});
}

/** 登录表单提交 */
function handleLoginSubmit() {
	const {path, queryParams} = parseRedirect();
	loading.value = true;
	userStore
		.login(loginData.value)
		.then((res) => {
			console.log(res);
			const {path, queryParams} = parseRedirect();
			router.push({path: path, query: queryParams});
		})
		.catch((reason) => {
			console.log(reason);
			getCaptcha();
		})
		.finally(() => {
			loading.value = false;
		});
	// loginFormRef.value?.validate((valid: boolean) => {
	//   if (valid) {
	//     loading.value = true;
	//     userStore
	//       .login(loginData.value)
	//       .then((res) => {
	//         console.log(res);
	//         const { path, queryParams } = parseRedirect();
	//         router.push({ path: path, query: queryParams });
	//       })
	//       .catch(() => {
	//         getCaptcha();
	//       })
	//       .finally(() => {
	//         loading.value = false;
	//       });
	//   }
	// });
}

/** 解析 redirect 字符串 为 path 和  queryParams */
function parseRedirect(): {
	path: string;
	queryParams: Record<string, string>;
} {
	const query: LocationQuery = route.query;
	const redirect = (query.redirect as string) ?? "/";

	const url = new URL(redirect, window.location.origin);
	const path = url.pathname;
	const queryParams: Record<string, string> = {};

	url.searchParams.forEach((value, key) => {
		queryParams[key] = value;
	});

	return {path, queryParams};
}

/** 主题切换 */
const toggleTheme = () => {
	const newTheme =
		settingsStore.theme === ThemeEnum.DARK ? ThemeEnum.LIGHT : ThemeEnum.DARK;
	settingsStore.changeTheme(newTheme);
};

/** 根据屏幕宽度切换设备模式 */
watchEffect(() => {
	if (height.value < 600) {
		icpVisible.value = false;
	} else {
		icpVisible.value = true;
	}
});

/** 检查输入大小写 */
function checkCapslock(event: KeyboardEvent) {
	// 防止浏览器密码自动填充时报错
	if (event instanceof KeyboardEvent) {
		isCapslock.value = event.getModifierState("CapsLock");
	}
}

onMounted(() => {
	getCaptcha();
});
</script>

<style lang="scss" scoped></style>
